<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
<table><tbody>
    <tr>
        <td>Use Browser Recommended Resolution</td>
        <td><input type="checkbox" data-bind="checked: useBrowserRecommendedResolution"></td>
    </tr>
    <tr>
        <td>Resolution Scale</td>
        <td>
            <input type="range" min="0.1" max="2.0" step="0.1" data-bind="value: resolutionScale, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: resolutionScale">
        </td>
    </tr>
</tbody></table>
</div>

<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');
		// When browser recommended resolution is enabled, the viewer renders at
	// CSS pixel resolution (96 dpi). Otherwise, the viewer renders at the
	// screen's native resolution.
	//
	// Resolution scale applies an additional scaling factor to the
	// WebGL canvas.
	//
	// For example, if the cesium container div is 500x500 pixels,
	// window.devicePixelRatio is 2.0, and useBrowserRecommendedResolution
	// is false, the WebGL canvas will be 1000x1000 pixels. Then if
	// the resolutionScale is 0.25, the canvas will be scaled
	// down to 250x250 pixels.

	var viewModel = {
		useBrowserRecommendedResolution : false,
		resolutionScale : 0.25
	};

	Cesium.knockout.track(viewModel);
	var toolbar = document.getElementById('toolbar');
	Cesium.knockout.applyBindings(viewModel, toolbar);
	for (var name in viewModel) {
		if (viewModel.hasOwnProperty(name)) {
			Cesium.knockout.getObservable(viewModel, name).subscribe(update);
		}
	}

	function update() {
		viewer.useBrowserRecommendedResolution = viewModel.useBrowserRecommendedResolution;

		var resolutionScale = Number(viewModel.resolutionScale);
		resolutionScale = !isNaN(resolutionScale) ? resolutionScale : 1.0;
		resolutionScale = Cesium.Math.clamp(resolutionScale, 0.1, 2.0);
		viewer.resolutionScale = resolutionScale;
	}
	update();



</script>
</body>
</html>